<template>
  <div class="content-wrap info-responser" v-loading="loading">
    <div class="content-form tag-scrollbar">
      <template v-if="editable">
        <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="0">
          <ul>
            <li>
              <div class="card row2">
                <div class="star"></div>
                <div>
                  <span class="icon linear-purpose">
                    <icon-svg name="iconResTeam"></icon-svg>
                  </span>
                </div>
                <div class="title">责任团队</div>
                <div class="content">
                  <el-form-item prop="respTeamId">
                    <el-cascader
                      v-model="editForm.respTeamId"
                      :key="teamIndex"
                      :options="depts"
                      :props="{
                        expandTrigger: 'hover',
                        value: 'deptId',
                        label: 'deptNm',
                        children: '_children',
                        checkStrictly: true
                      }"
                      clearable
                      filterable
                      :disabled="!editable"
                    ></el-cascader>
                  </el-form-item>
                </div>
              </div>
            </li>
            <li>
              <div class="card row2">
                <div>
                  <span class="icon linear-blue">
                    <icon-svg name="iconResponse"></icon-svg>
                  </span>
                </div>
                <div class="title">责任人</div>
                <div class="content">
                  <el-form-item prop="responserId">
                    <el-select v-model="editForm.responserId" :disabled="!editable" filterable clearable>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in responsers"
                        :key="item.userId"
                        :label="$name(item)"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </li>
            <li>
              <div class="card row2">
                <div class="star"></div>
                <div>
                  <span class="icon linear-yellow">
                    <icon-svg name="iconResTeam"></icon-svg>
                  </span>
                </div>
                <div class="title">开发团队</div>
                <div class="content">
                  <el-form-item prop="devTeamId">
                    <el-select v-model="editForm.devTeamId" :disabled="!editable">
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in devDepts"
                        :key="item.deptId"
                        :label="item.deptNm"
                        :value="item.deptId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </li>
            <li>
              <div class="card row2">
                <div class="star"></div>
                <div>
                  <span class="icon linear-cyan">
                    <icon-svg name="iconResponse"></icon-svg>
                  </span>
                </div>
                <div class="title">开发负责人</div>
                <div class="content">
                  <el-form-item prop="developerId">
                    <el-select v-model="editForm.developerId" :disabled="!editable" filterable clearable>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in develops"
                        :key="item.userId"
                        :label="$name(item)"
                        :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </li>
            <li>
              <div class="card row2">
                <div>
                  <span class="icon linear-purpose">
                    <icon-svg name="iconRequirer"></icon-svg>
                  </span>
                </div>
                <div class="title">注册人/提出人</div>
                <div class="content">
                  {{ $name(tagInfo, 'requirerNnm', 'requirerNm') }}
                </div>
              </div>
            </li>
          </ul>
        </el-form>
      </template>
      <template v-else>
        <ul>
          <li>
            <div class="card row2">
              <div>
                <span class="icon linear-purpose">
                  <icon-svg name="iconResTeam"></icon-svg>
                </span>
              </div>
              <div class="title">责任团队</div>
              <div class="content">
                {{ tagInfo.respTeamNm }}
              </div>
            </div>
          </li>
          <li>
            <div class="card row2">
              <div>
                <span class="icon linear-blue">
                  <icon-svg name="iconResponse"></icon-svg>
                </span>
              </div>
              <div class="title">责任人</div>
              <div class="content">
                {{ tagInfo.responserNm ? $name(tagInfo, 'responserNnm', 'responserNm') : '暂无' }}
              </div>
            </div>
          </li>
          <li>
            <div class="card row2">
              <div>
                <span class="icon linear-yellow">
                  <icon-svg name="iconResTeam"></icon-svg>
                </span>
              </div>
              <div class="title">开发团队</div>
              <div class="content">
                {{ tagInfo.develTeamNm }}
              </div>
            </div>
          </li>
          <li>
            <div class="card row2">
              <div>
                <span class="icon linear-cyan">
                  <icon-svg name="iconResponse"></icon-svg>
                </span>
              </div>
              <div class="title">开发负责人</div>
              <div class="content">
                {{ $name(tagInfo, 'developerNnm', 'developerNm') }}
              </div>
            </div>
          </li>
          <li>
            <div class="card row2">
              <div>
                <span class="icon linear-purpose">
                  <icon-svg name="iconRequirer"></icon-svg>
                </span>
              </div>
              <div class="title">注册人/提出人</div>
              <div class="content">
                {{ $name(tagInfo, 'requirerNnm', 'requirerNm') }}
              </div>
            </div>
          </li>
        </ul>
      </template>
    </div>
    <div class="content-handler" v-if="tagStatus === 50 && !isModify">
      <el-button type="primary" v-if="!editable" @click="beginEdit">编辑</el-button>
      <el-button v-if="editable" @click="cancelEdit">取消</el-button>
      <el-button type="primary" v-if="editable" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tagId: {
      type: String,
      required: true,
      default: ''
    },
    tagStatus: {
      type: Number,
      default: 50
    },
    isModify: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      editable: false,
      teamIndex: 0,
      depts: [],
      devDepts: [],
      responsers: [],
      develops: [],
      editForm: {
        respTeamId: [],
        responserId: '',
        devTeamId: '',
        developerId: ''
      },
      editFormRules: {
        respTeamId: [{ required: true, message: '责任团队不能为空', trigger: 'change' }],
        devTeamId: [{ required: true, message: '开发团队不能为空', trigger: 'change' }],
        developerId: [{ required: true, message: '开发负责人不能为空', trigger: 'change' }]
      },
      tagInfo: {
        respTeamNm: '',
        responserNm: '',
        responserNnm: '',
        develTeamNm: '',
        developerNm: '',
        developerNnm: '',
        requirerNm: '',
        requirerNnm: '',
        respTeamId: '',
        responserId: '',
        devTeamId: '',
        developerId: ''
      }
    }
  },
  watch: {
    tagId() {
      this.editable = false
    },
    'editForm.respTeamId'() {
      this.editForm.responserId = ''
      this.responsers = []
      this.getResponsers()
    },
    'editForm.devTeamId'(val) {
      this.editForm.developerId = ''
      this.develops = []
      if (val) {
        this.devDepts.forEach(item => {
          if (item.deptId === val) this.develops = item.userList || []
        })
      }
    }
  },
  methods: {
    beginEdit() {
      this.getDelpt()
      this.getDevDept()
      this.$nextTick(() => (this.editable = true))
    },
    getDelpt() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authDeptMgr/all'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          let treeList = []
          let list = this.$utils.arrayToTree(data.data, {
            id: 'deptId',
            pid: 'parentDeptId',
            mainSort: 'treeLevel'
          })
          list.forEach((item, index) => {
            const listIndex = treeList.findIndex(listItem => listItem.compId === item.compId)
            if (listIndex >= 0) {
              if (treeList[listIndex]._children) treeList[listIndex]._children.push(item)
              else treeList[listIndex]._children = [item]
            } else {
              treeList.push({
                compId: item.compId,
                deptId: -index,
                deptNm: item.compNm,
                disabled: true,
                _children: [item]
              })
            }
          })
          this.depts = treeList
          ++this.teamIndex
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getResponsers() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authUser/getUserByDeptId'),
        method: 'get',
        params: this.$ajax.setParams({
          deptId: isNaN(this.editForm.respTeamId)
            ? this.editForm.respTeamId[this.editForm.respTeamId.length - 1]
            : this.editForm.respTeamId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.responsers = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getDevDept() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysProcNodeRole/deptuser/1/40'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.devDepts = data.data
          if (this.editForm.devTeamId)
            this.devDepts.forEach(item => {
              if (item.deptId === this.editForm.devTeamId) this.develops = item.userList || []
            })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getDetail() {
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astTag/getPrincipalRela/${this.tagId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editForm.respTeamId = data.data.respTeamId
          this.editForm.devTeamId = data.data.devTeamId || ''
          this.$nextTick(() => {
            this.editForm.responserId = data.data.responserId === '0' ? '' : data.data.responserId
            this.editForm.developerId = data.data.developerId
          })
          this.tagInfo.respTeamNm = data.data.respTeamNm
          this.tagInfo.responserNnm = data.data.responserNnm
          this.tagInfo.responserNm = data.data.responserNm
          this.tagInfo.develTeamNm = data.data.develTeamNm
          this.tagInfo.developerNm = data.data.developerNm
          this.tagInfo.developerNnm = data.data.developerNnm
          this.tagInfo.requirerNm = data.data.requirerNm
          this.tagInfo.requirerNnm = data.data.requirerNnm
          this.tagInfo.respTeamId = data.data.respTeamId
          this.tagInfo.responserId = data.data.responserId
          this.tagInfo.devTeamId = data.data.devTeamId
          this.tagInfo.developerId = data.data.developerId
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$ajax({
            url: this.$ajax.setUrl('ast/astTag/updatePrincipalRela'),
            method: 'post',
            data: this.$ajax.setData({
              devTeamId: this.editForm.devTeamId,
              developerId: this.editForm.developerId,
              respTeamId: isNaN(this.editForm.respTeamId)
                ? this.editForm.respTeamId[this.editForm.respTeamId.length - 1]
                : this.editForm.respTeamId,
              responserId: this.editForm.responserId,
              tagId: this.tagId
            })
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.editable = false
              this.getDetail()
              this.$emit('callback')
            } else {
              this.$message.error(data.data || data.msg)
            }
            this.loading = false
          })
        }
      })
    },
    cancelEdit() {
      this.editForm.respTeamId = this.tagInfo.respTeamId
      this.editForm.responserId = this.tagInfo.responserId
      this.editForm.devTeamId = this.tagInfo.devTeamId
      this.editForm.developerId = this.tagInfo.developerId
      this.editable = false
    },
    clearForm() {
      this.scenes = []
      this.platforms = []
      this.depts = []
      this.devDepts = []
      this.editForm = {
        respTeamId: [],
        responserId: '',
        devTeamId: '',
        developerId: ''
      }
      this.tagInfo = {
        respTeamNm: '',
        responserNm: '',
        develTeamNm: '',
        developerNm: '',
        requirerNm: ''
      }
      if (this.editable) this.$nextTick(() => this.$refs['editForm'].clearValidate())
      this.editable = false
    }
  }
}
</script>

<style lang="scss">
.info-responser {
  li {
    float: left;
    width: 20%;
    padding: 0 1%;
  }
  .el-select,
  .el-cascader {
    .el-input__inner {
      color: $theme-color;
      border-style: dashed;
      border-radius: 20px;
    }
    .el-input .el-select__caret {
      color: $theme-color;
    }
  }
  .icon {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 20px 0;
    line-height: 70px;
    color: #fff;
    border-radius: 50%;
    svg {
      width: 40px;
      height: 40px;
      margin-top: 10px;
    }
  }
  .card {
    margin-bottom: 20px;
    text-align: center;
    .title {
      margin: 0 0 20px 0;
    }
    .content {
      height: 50px;
      color: $theme-color;
      position: relative;
      &:after {
        width: 100%;
        height: 3px;
        content: '';
        background-color: #666bc6;
        position: absolute;
        left: 0;
        bottom: -13px;
      }
    }
  }
}
</style>
